<template>
  <div class="goods">
    <div class="goods-title">
      <div class="go-back" @click="goback">
        <span class="iconfont icon-fanhui"></span>
      </div>
    </div>
    <div class="goods-main">
      <div class="goods-swiper">
        <van-swipe>
          <van-swipe-item v-for="(item, index) in goodsList" :key="index">
            <img v-lazy="item" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="goods-info">
        <div class="goods-price">{{ goodsPrice }}</div>
        <div class="info-txt">{{ goodsName }}</div>
      </div>
    </div>
    <div class="goods-buy">
      <div><span class="iconfont icon-dianpu"></span>店铺</div>
      <div><span class="iconfont icon-kefu"></span>客服</div>
      <div><span class="iconfont icon-gouwuche"></span>购物车</div>
      <button class="buy-now" @click="addToShopCar">加入购物车</button>
      <button>立刻购买</button>
    </div>
  </div>
</template>
<script>
import { getGoodsInfo, addShoppingCar } from "@axios/service";
import { Dialog } from "vant";
export default {
  data() {
    return {
      goodsList: [],
      goodsPrice: "",
      goodsName: "",
      goodsId: null,
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    async setGoodsInfo() {
      let gid = this.$route.query.id;
      let obj = { gid: this.$route.query.id };
      let { data } = await getGoodsInfo(obj);
      this.goodsList = data.data.bigPicList;
      this.goodsPrice = data.data.goodsPrice;
      this.goodsName = data.data.goodsName;
      this.goodsId = gid;
    },
    async addToShopCar() {
      const user = localStorage.getItem("lgc");
      if (user) {
        let obj = { user, gid: this.goodsId, buyNum: 1 };
        let { data } = await addShoppingCar(obj);
        if (data.status) {
          Dialog({ message: data.message });
        }
      } else {
        Dialog({ message: "您还没有登录,请您登陆后添加进购物车哦" });
        this.$router.push("/User");
      }
    },
  },
  created() {
    this.setGoodsInfo();
  },
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.goods {
  .goods-title {
    .wh(375,44);
    position: fixed;
    top: 0;
    z-index: 1;
    .go-back {
      .wh(30,30);
      background: gray;
      border-radius: 50%;
      text-align: center;
      .icon-fanhui {
        .fs(25);
        .lh(30);
      }
    }
  }
  .goods-main {
    .goods-swiper {
      /deep/.van-swipe__indicators {
        display: none;
      }
      .wh(375,375);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .goods-info {
      background: #f2f2f2;
      border-radius: 0% 0% 10% 10%;
      .goods-price {
        .wh(345,40);
        .padding(10,0,0,30);
        .fs(35);
        color: #f2270c;
        .lh(40);
      }
      .info-txt {
        .w(340);
        .mgau(10);
        .fs(18);
        color: black;
        font-weight: 800;
        .lh(24);
        .padding(0,0,20,0);
      }
    }
  }
  .goods-buy {
    .wh(375,60);
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: flex;
    div {
      .wh(52,50);
      display: flex;
      flex-direction: column;
      text-align: center;
      .padding(10,0,0,0);
      .lh(25);
      .iconfont {
        .fs(25);
      }
    }
    button {
      .wh(100,40);
      .margin(10,5,5,0);
      .fs(16);
      color: #ffffff;
      background: #ffc60d;
      outline: 0;
      border: 0;
      border-radius: 20px;
    }
    .buy-now {
      background: #f22c0c;
    }
  }
}
</style>
